<template>
  <div class="rules">
    <nav-bar :left-arrow="true" :left-text="leftText"></nav-bar>
    <div class="contain">
    <van-cell-group>
      <van-cell title="起步价" value="30元" >
        <template #label>
          <p class="custom-title">
            包含预约时长、驾驶时长及免费时长
          </p>
          <p class="custom-title">
            超出部分，按照里程收取
          </p>
          <p class="custom-title">
            （含租赁费、服务费）
          </p>
        </template>
      </van-cell>
    </van-cell-group>
    <van-cell-group>
      <van-cell title="时长费" value="10元/10分钟" >
        <template #label>
          <p class="custom-title">
            不包含十分钟按十分钟收取费用
          </p>
          <p class="custom-title">
            （含租赁费、服务费）
          </p>
        </template>
      </van-cell>
    </van-cell-group>
    <van-cell-group>
      <van-cell title="调度费（非还车点）" value="100元" >
        <template #label>
          <p class="custom-title">
            车辆停至运营区内非还车点需要交纳费用
          </p>
        </template>
      </van-cell>
    </van-cell-group>
    <van-cell-group>
      <van-cell title="调度费（运营区域外）" value="300元" >
        <template #label>
          <p class="custom-title">
            车辆停至运营区外非还车点需要交纳费用
          </p>
        </template>
      </van-cell>
    </van-cell-group>
    <div class="img">
      <img src="../../assets/rules.jpg" alt="">
    </div>
    </div>
  </div>
</template>

<script>
import NavBar from '../../components/NavBar'

export default {
  name: 'Rules',
  components: {
    NavBar
  },
  data () {
    return {
      leftText: '计价规则'
    }
  }
}
</script>

<style scoped lang='scss'>
/deep/.van-nav-bar__content {
  background-color: #fff !important;
}
/deep/.van-nav-bar__title {
  font-size: 18px;
    color: rgb(148, 146, 146) !important;
}
/deep/.van-nav-bar .van-icon {
    color: rgb(148, 146, 146) !important;
}
/deep/.van-nav-bar__text{
    color: rgb(148, 146, 146) !important;
}
.van-cell__label{
  width: 300px;
}
.img{
  width: 100%;
  height: 200px;
  img{
    height: 100%;
    width: 100%;
  }
}
</style>
